@import "vars";
.theme-white {
  /* white主题 */
  @font-color: @color[navy]; /* 字体颜色 */
  @bg-color: @color[white]; /* 背景颜色 */
  @border-color: @font-color; /* 边框样色 */
  @hl-color: @color[blue]; /* 高亮颜色 */

  .fa-header {
    background-color: @bg-color;
    color: @font-color;
    .fa-logo {
      color: @font-color;
      background-color: @bg-color;
      box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    }
    .layui-nav {
      background-color: @bg-color;
      .layui-nav-item > a {
        color: @font-color;
      }
      .layui-nav-more {
        border-color: @border-color transparent transparent;
      }
    }
  }

  .fa-side {
    background-color: @bg-color;
    color: @font-color;
    box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    .fa-nav-dir:before,
    .fa-nav-item:before {
      background-color: @hl-color;
    }
    .fa-nav-dir:hover,
    .fa-nav-item.fa-nav-itemed,
    .fa-nav-item:hover {
      background-color: @bg-color;
      color: @hl-color;
    }
  }
}

.theme-red {
  /*red主题*/
  @def-color: @color[black];
  @font-color: @color[white];
  @bg-color: @color[red];
  @border-color: @font-color;
  @hl-color: @color[blue];
  color: @def-color;

  .fa-header {
    background-color: @bg-color;
    .fa-logo {
      color: @font-color;
      background-color: @bg-color;
      box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    }
    .layui-nav {
      background-color: @bg-color;
    }
    .layui-nav .layui-nav-item > a {
      color: @font-color;
    }
    .layui-nav .layui-nav-more {
      border-color: @border-color transparent transparent;
    }
  }
  .fa-side {
    background-color: @bg-color;
    color: @font-color;
    box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    .fa-nav {
      .fa-nav-dir:before,
      .fa-nav-item:before {
        background-color: @bg-color;
      }
      .fa-nav-dir:hover,
      .fa-nav-item.fa-nav-itemed,
      .fa-nav-item:hover {
        background-color: @bg-color;
        color: @font-color;
      }
    }
  }
}

.theme-green {
  /*green主题*/
  @font-color: @color[white]; /* 字体颜色 */
  @bg-color: @color[green]; /* 背景颜色 */
  @border-color: @font-color; /* 边框样色 */
  @hl-color: @color[blue]; /* 高亮颜色 */

  .fa-header {
    background-color: @bg-color;
    color: @font-color;
    .fa-logo {
      color: @font-color;
      background-color: @bg-color;
      box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    }

    .layui-nav {
      background-color: @bg-color;
      .layui-nav-item > a {
        color: @font-color;
      }
      .layui-nav-more {
        border-color: @font-color transparent transparent;
      }
    }
  }
  .fa-side {
    background-color: @bg-color;
    color: white;
    box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, 5%);
    .fa-nav {
      .fa-nav-dir:before,
      .fa-nav-item:before {
        background-color: @bg-color;
      }
      .fa-nav-dir:hover,
      .fa-nav-item.fa-nav-itemed,
      .fa-nav-item:hover {
        background-color: @bg-color;
        color: @font-color;
      }
    }
  }
}
